PBA INSTITUTE

Colspan and Rowspan

In HTML, colspan and rowspan attributes are utilized within <td> or <th> elements to manipulate the span of cells within tables. colspan dictates the number of columns a cell spans horizontally, while rowspan controls its vertical span across rows. These attributes enhance the versatility of table structures, allowing cells to merge and cover multiple columns or rows. This capability facilitates the creation of more intricate data presentations in web development, enabling designers to organize and display information in a structured and visually appealing manner, thereby improving the user experience on websites and web applications.

Example :

Example-1

													
													
<!DOCTYPE html>
<html>
<head>
<title>Table Rowspan and Colspan</title></head>
<body>
	<p align="Center">
	<table border="1">
  	<tr>
    	<td colspan="2" align="center">Header Cell 1</td>
    	<td align="center">Header Cell 2</td>
  	</tr>
  	<tr>
    	<td rowspan="2" align="center">Rowspan Cell 1</td>
    	<td align="center">Rowspan Cell 2</td>
    	<td align="center">Normal Cell</td>
  	</tr>
  	<tr>
    	<td align="center">Normal Cell</td>
    	<td align="center">Normal Cell</td>
  	</tr>
  	<tr>
    	<td colspan="3" align="center">Footer Cell</td>
  	</tr>
	</table>
	</p>
	</body>
</html>

													
													
												

Output:

Table Rowspan and Colspan

Header Cell 1		Header Cell 2
Rowspan Cell 1	Rowspan Cell 2	Normal Cell
	Normal Cell	Normal Cell
Footer Cell

Nested Table with colspan and rowspan

													
													
<!DOCTYPE html>
<html>
	<body>
     <table border="2">
  <tr>
    <td colspan="2" align="center">Main Header</td>
  </tr>
  <tr>
    <td>
      <table border="2" align="center">
        <tr>
          <td colspan="2" align="center"> Nested </td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
        </tr>
      </table>
    </td>
    <td>
      <table border="2">
        <tr>
          <td colspan="2">Nested</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td colspan="2">Main Footer</td>
  </tr>
</table>
</body>
</html>
													
													
												

Output :

Main Header

Nested
1	2

Nested
1	2

Main Footer

Conclusion :

In conclusion, 'colspan' and 'rowspan' attributes enable the merging of table cells, enhancing layout flexibility. colspan spans a cell over multiple columns, consolidating horizontal space. Conversely, rowspan extends a cell across multiple rows, streamlining vertical organization. This functionality facilitates intricate table structures, accommodating complex data presentations and improving visual clarity within web documents.

Colspan and Rowspan

Example :

Conclusion :

HTML All Topics

SHARE